import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'umi'
import { SaveOutlined } from '@ant-design/icons'
import { withI18n } from '@lingui/react'
import { Card, Form, Input, Button, message, Transfer } from 'antd'
import { tailLayout, formItemLayout } from '@/utils/helper'
import styles from './index.less'
import '@/utils/index.less'
import { get, post, put } from '@/services/https'
import { NAME, USERPWD } from '@/utils/regExp'
const { TextArea } = Input
// 1超级管理员 2系统管理员 3审计管理员 4安全管理员
@withI18n()
@connect(({ post, loading }) => ({ post, loading }))
class userDer extends React.Component {
  state = {
    keys: [],
    setIsModalVisible: false, //弹框
    initialValues: {
      desc: '',
    },
    targetKeys: [],
    accessibility: '',
    mockData: [],
    selectedKeys: [],
  }
  formRef = React.createRef()
  componentDidMount() {
    if (this.props.match.params.id && this.props.match.params.id != 0) {
      this.getData(this.props.match.params.id)
    } else {
    }
    this.setState({ accessibility: sessionStorage.getItem('accessibility') })
    this.classlist()
  }
  classlist = () => {
    post('class/list', {}).then((res) => {
      let data = res.data
      this.setState({ mockData: data })
    })
  }
  getData = (id) => {
    get('teacher/read?id=' + id).then((res) => {
      let initialValues = res.data
      this.setState({
        targetKeys: initialValues.class_group,
      })
      this.formRef.current.setFieldsValue(initialValues)
    })
  }
  handleSaveBtn = (values) => {
    const { location, i18n } = this.props
    if (this.props.match.params.id && this.props.match.params.id != 0) {
      values.id = this.props.match.params.id * 1
      delete values.passwd
      post('teacher/update', values).then((res) => {
        if (res.code === 0) {
          message.success(i18n.t`Modify`)
          this.props.history.push('/dashboard/TeacherList')
        } else {
          message.error(res.info)
        }
      })
    } else {
      delete values.passwd
      let data = {
        ...values,
      }
      post('teacher/create', data).then((res) => {
        if (res.code === 0) {
          message.success(i18n.t`The`)
          this.props.history.push('/dashboard/TeacherList')
        } else {
          message.error(res.info)
        }
      })
    }
  }
  clFna = () => {
    this.props.history.push('/dashboard/TeacherList')
  }
  onChange = (nextTargetKeys, direction, moveKeys) => {
    this.setState({ targetKeys: nextTargetKeys })
  }
  onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({
      selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys],
    })
  }
  render() {
    const { location, i18n } = this.props
    const { initialValues, targetKeys, mockData, selectedKeys } = this.state
    const formProps = {
      name: 'basic',
      onFinish: this.handleSaveBtn,
      initialValues,
      ref: this.formRef,
    }
    return (
      <div>
        <Form {...formItemLayout} {...formProps}>
          <div className="ct">
            <div className="ban">
              <div className="tetli">
                {this.props.match.params.id !== 0 ? '编辑教师' : '新增教师'}
              </div>
              <div
                style={{
                  width: '60px',
                  height: '6px',
                  background:
                    'linear-gradient( 270deg, rgba(37,111,254,0) 0%, #256FFE 100%)',
                }}
              ></div>
              <div className="add">
                <div
                  style={{
                    margin: '15px 0',
                  }}
                >
                  <Button
                    type="primary"
                    htmlType="submit"
                    icon={<SaveOutlined />}
                  >
                    {i18n.t`Baocun`}
                  </Button>
                  <Button
                    style={{ marginLeft: '15px' }}
                    onClick={this.clFna}
                  >{i18n.t`clFna`}</Button>
                </div>
              </div>
            </div>
            <Form.Item
              label="教师名称"
              name="teacher_name"
              rules={[
                {
                  required: true,
                },
                {
                  pattern: NAME,
                  message: i18n.t`Only`,
                },
              ]}
            >
              <Input className="Ip_60" />
            </Form.Item>
            <Form.Item
              label="所属班级"
              name="class_group"
              rules={[
                {
                  required: true,
                  message: '',
                },
              ]}
            >
              <Transfer
                dataSource={mockData}
                titles={['班级名称', '选中班级']}
                targetKeys={targetKeys}
                selectedKeys={selectedKeys}
                onChange={this.onChange}
                onSelectChange={this.onSelectChange}
                render={(item) => item.class_name}
                rowKey={(record) => record.id}
              />
            </Form.Item>
          </div>
        </Form>
      </div>
    )
  }
}
userDer.propTypes = {
  post: PropTypes.object,
  loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}
export default userDer
